<template>
  <div class="ppp">
    <div class="oooo">
      <img :src="cakeimage" alt="">
    </div>
      <div class="shang">
          <div class="iu">
               <p class="cakenameq">{{cakename}}</p>
            <span class="zhuan">专人配送</span>
            <p class="cakebrief">{{cakebrief}}</p>
            <div class="count">
                <span class="jia">￥<i class="cakeprice">{{cakeprice}}</i></span>
                <span class="yuan">￥<i class="cakeoriginal">{{cakeoriginal}}</i></span>
            </div>
          </div>
          <div class="xia">
              <i class="iconfont icon-42"></i><span>双层水果夹心，水果随季节变化 须知</span>
          </div>
      </div>
     <div class="oi">
       <span class="ji">
         <van-icon name="passed" class="nn"/>
         <!-- <i class="iconfont icon-baocun"></i> -->
          积分抵现
       </span>
        <span class="ji">
          <van-icon name="passed" class="nn"/>
         <!-- <i class="iconfont icon-baocun"></i> -->
           品质保障
       </span>
        <span class="ji">
          <van-icon name="passed" class="nn"/>
         <!-- <i class="iconfont icon-baocun"></i> -->
           正品保证
       </span>
        <span class="ji">
          <van-icon name="passed" class="nn"/>
         <!-- <i class="iconfont icon-baocun"></i> -->
           不支持7天无理由退货
       </span>
     </div>
      <div class="gui">
          <span class="ge">规格</span>
          <div class="de">
               <span>8英寸（对角线约20cm）</span>
                <div class="iconfont icon-angle-right"></div>
          </div>
      </div>
      <div class="pei">
          <div class="ge">配送</div>
          <div class="m">
              <div class="now"><span class="iconfont icon-shizhong1"></span>现在下单，最早可05月03日（今天）送达</div>
              <div class="shi"><span class="iconfont icon-didian"></span>市区免费配送<div class="iconfont icon-angle-right"></div></div>
          </div>
         </div> 
         <div class="ping">
             <div class="ge">评价</div>
             <div class="m">
              <div class="shi">综合评分
                  <span class="cakescore">{{cakescore}}</span>
                    <div class="op">
                        <div class="cha">查看全部<span class="ji">{{scorenum}}</span>条评论
                            <span class="iconfont icon-angle-right"></span>
                        </div>
                    </div>
                </div>
               </div>
            </div>
            <div class="love">
                <div class="io">
                    <img :src="brandimg" alt="">
                </div>
                <router-link to="/brand/era">
                <div class="oo">
                    <span class="aim">{{brandname}}</span>
                     <span class="iconfont icon-angle-right"></span>
                </div></router-link>
            </div>
            <div class="oppp">
              <img :src="bimg" alt="">
            </div>
            <!-- <div class="xiang1">
              <span class="tuwen">图文详情</span>
              <span class="canshu">商品参数</span>

            </div> -->
            
             </div>

</template>

<script>

export default {
  props: {
    cakename: String,
    cakeimage:String,
    cakebrief: String,
    cakeoriginal: Number,
    cakeprice: Number,
    cakescore: Number,
    scorenum: Number,
    brandname: String,
    brandimg: String,
    typeid:Number,
    goodsid:Number,
    bimg:String
  },
  
  
};
</script>

<style scoped>
.oppp{
  margin-top:0rem;
  /* height: 17.7rem; */
  width: 100%;
}
.oppp img{
  width: 100%;
  height: 100%;
}
.shang p {
  line-height: 0.3rem;
}
.mpmp {
  width: 100%;
  overflow-x: hidden;
  background-color: #f9f9f9;
}
.shang {
  background-color: white;
  padding: 0 0.1rem;
  border-bottom: 1px solid #bcbcbc;
  margin-bottom: 0.16rem;
}
.cakenameq {
  font-size: 0.16rem;
  margin-bottom: 0;
}
.zhuan {
  margin-top: 0;
  display: block;
  width: 0.5rem;
  background-color: #6ed6d9;
  color: white;
  font-size: 0.12rem;
}
.cakebrief {
  color: #bcbcbc;
  font-size: 0.14rem;
}
.oooo{
  width: 100%;
    height: 3rem;
    font-size: 0.2rem;
}
.oooo img{
  height: 100%;
  display: inline-block;
    width: 100%;
    height: 3rem;
}
.aim{
  color:black;
}
.oo .iconfont{
  color:black;
}
.oi{
  padding: 0.14rem 0.1rem 0.16rem;
    color: #919191;
    font-size: 0.12rem;
    background-color: #fff;
    border-top: 0.01rem solid gainsboro;
  border-bottom: 0.01rem solid gainsboro;
  margin-bottom: 0.16rem;
}
.ji{
  display: inline-block;
    margin-right: .05rem;
}
.ji .nn{
  display: inline-block;
    font-size: 0.13rem;
    color: #f44236;
}
.count {
  display: flex;
  line-height: 0.3rem;
}
.jia,
.yuan {
  display: block;
  /* float:left */
}
.oo{
  position: relative;
}
.oo .iconfont{
  position: absolute;
  top: -0.2rem;
  right: 0.1rem;
}
.jia {
  color: red;
  font-size: 0.12rem;
  margin-right: 0.05rem;
}
.jia .cakeprice {
  font-size: 0.18rem;
}
.iu {
  border-bottom: 1px solid #bcbcbc;
}
.yuan {
  text-decoration: line-through;
  color: #bcbcbc;
  font-size: 0.1rem;
}
.xia {
  color: red;
  font-size: 0.14rem;
  line-height: 0.45rem;
}
.xia i {
  margin-right: 0.03rem;
}
.gui {
  margin-bottom: 0.14rem;
  line-height: 0.45rem;
  display: flex;
  font-size: 0.14rem;
  background-color: white;
  width: 100%;
  border-top: 0.01rem solid gainsboro;
  border-bottom: 0.01rem solid gainsboro;
}
.ge {
  color: #bcbcbc;
  margin-right: 0.2rem;
}
.de {
  width: 85%;
  display: flex;
  justify-content: space-between;
}
.pei {
  margin-bottom: 0.16rem;
  /* line-height: 0.45rem; */
  display: flex;
  justify-content: space-between;
  font-size: 0.14rem;
  background-color: white;
  width: 100%;
  border-top: 0.01rem solid gainsboro;
  border-bottom: 0.01rem solid gainsboro;
}
.shi {
  width: 100%;
  display: flex;
  position: relative;
  justify-content: space-between;
  text-align: left;
}
.pei .ge {
  width: 10%;
  line-height: 0.45rem;
  margin-right: 0.1rem;
}
.m {
  width: 90%;
}
.now,
.shi,
.ping {
  line-height: 0.45rem;
}
.ping {
  margin-bottom: 0.16rem;
  /* line-height: 0.45rem; */
  display: flex;
  justify-content: space-between;
  font-size: 0.14rem;
  background-color: white;
  width: 100%;
  border-top: 0.01rem solid gainsboro;
  border-bottom: 0.01rem solid gainsboro;
}
.now {
  border-bottom: 1px solid #bcbcbc;
}
.shi .iconfont {
  margin-right: 0.1rem;
}
.ping .ge {
  width: 8%;
  font-size: 0.14rem;
  color: #bcbcbc;
  margin-right: 0.2rem;
}
.ping .m {
  width: 90%;
  display: flex;
  justify-content: space-between;
  font-size: 0.14rem;
  position: relative;
}
.cakescore {
  color: red;
  position: absolute;
  left: 60px;
}
.cha {
  color: #bcbcbc;
}
.op {
  float: left;
}
.love {
  margin-bottom: 0.1rem;
  /* line-height: 0.45rem; */
  font-size: 0.14rem;
  background-color: white;
  width: 100%;
height: 0.8rem;
  border-top: 0.01rem solid gainsboro;
  border-bottom: 0.01rem solid gainsboro;
}
.love .io {
  float: left;
  line-height: 0.8rem;
  width: 40%;
  height: 0.8rem;
}
.io img {
  width: 100%;
  height: 100%;
}
.oo {
  width: 60%;
  float: left;
  display: flex;
  justify-content: space-between;
}
.aim {
  font-size: 0.14rem;
  margin-left: 0.1rem;
  margin-top: 0.1rem;
}
.oo .iconfont {
  line-height: 0.8rem;
  margin-right: 0.1rem;
}
.ppp {
  flex: 1;
  overflow: auto;
}

/* .xiang1 {
  font-size: 0.12rem;
  margin-bottom: 0.16rem;
 
  font-size: 0.14rem;
  display: flex;
  justify-content: space-between;
  background-color: white;
  width: 100%;
  border-top: 0.01rem solid gainsboro;
  border-bottom: 0.01rem solid gainsboro;
}
.tuwen,
.canshu {
  width: 50%;
  color: #bcbcbc;
  text-align: center;
  line-height: 0.45rem;
} */
</style>